<script>
export default {
  props: {
    /**
     * The section's heading - gets rendered within a `h2` tag
     *
     * @type {string}
     */
    heading: {
      type: String,
      required: false,
      default: '',
    },
  },
};
</script>

<template>
  <section>
    <h2 v-if="heading" class="gl-font-lg gl-mt-0">{{ heading }}</h2>
    <slot name="default"></slot>
    <ul v-if="$scopedSlots.list" class="gl-list-style-none gl-gap-y-3 gl-p-0">
      <slot name="list"></slot>
    </ul>
  </section>
</template>
